{% extends 'base.html' %}
	
	{% block title_suffix %}
	    | Create Exercise
	{% endblock %}

{% block all_content %}
    <h1>Exercise creation page</h1>
    
    <form id="create" action="/test/create_test/progress/create/" method="post" name="create">
		{% csrf_token %}
		{% if available_questions %}
		    <table id="available_questions" class="table table-bordered table-striped table-condensed table-hover">
				<thead>
					<tr>
						<th>Question Id</th>
					    <th>Question</th>
					    <th>Question_order</th>
					    <th>Difficulty</th>
					    <th>Type</th>
					    <th>Select</th>
					</tr>
				</thead>
				<tbody>
			    	{% for question in available_questions %}
			    		<tr>
			    			<td class="question-id">{{ question.id}}</td>
			    			<td>{{ question.question }}</td>
			    			<td>{{ question.question_order }}</td>
			    			<td>{{ question.difficulty }}</td>
			    			<td>{{ question.question_type  }}</td>
			    			<td><input type="checkbox"></td>
			    		</tr>
				    {% endfor %}
			    </tbody>
			</table>
		{% else %}
			<p> No Questions matching your filter settings </p>
		{% endif %}
		
			<table id="new_questions" class="table table-bordered table-striped table-condensed table-hover">
				<thead>
					<tr>
						<th>Question Id</th>
					    <th>Question</th>
					    <th>Question_order</th>
					    <th>Difficulty</th>
					    <th>Type</th>
					    <th>Select</th>
					    <th style="text-align: center;">Add question</th>
					</tr>
				</thead>
			</table>
		
		<input type="button" onclick="moveIt()" class="btn btn-primary" value="Add questions" />
	  	<input type="hidden" name="page" value="{{page_id}}"/>
		<input type="submit" class="btn btn-primary" id="submit" value="Add to progress check"/>
    </form>
    
    
{% endblock %}

{% block footer %}
    <p>Footer</p>
{% endblock %}

{% block scripts %}	
	<script>
		function moveIt() {
		  $('#available_questions input[type=checkbox]:checked').each(function() {
		    var tr = $(this).closest('tr');
		    var id = tr.find(".question-id").text();
		    $('#create').append('<input type="hidden" value="'+id+'" name="question_ids"/>');
		    $('#new_questions').append($(tr));
		  });
		}
	</script>
	
{% endblock %}
